<template>
	<view class="orderInfo">
		<view class="topStatus">
			<view v-if="data.status == 0">
				<text>等待买家付款</text>
				<view>订单还剩{{timeDown}}</view>
			</view>
			<text v-if="data.status == 3">等待卖家发货</text>
			<view v-if="data.status == 6">
				<text>卖家已发货</text>
				<view>订单还剩{{timeDown}}天自动确认收货</view>
			</view>
			<text v-if="data.status ==9 || data.status ==24">交易成功</text>
			<text v-if="data.status ==23">交易关闭</text>
			<text v-if="data.status ==32">订单已取消</text>
		</view>
		<view class="addressInfo">
			<view>
				<text class="name">{{data.receiverName}}</text> <text class="phone">{{data.receiverPhone}}</text>
			</view>
			<view class="address">
				{{data.receiverCity + data.receiverDetailAddress}}
			</view>
		</view>
		<view class="uni-list content">
			<view class="uni-list-cell outLstbox" v-for="(item,index) in data.orderVoList.list">
				<view class="storeNameBox">
					<view class="storeName" @tap="goShop(item.storeId)">
						<image class="storepic" src="../../static/images/store.png" mode="widthFix"></image>
						{{item.storeName}}
						<image class="goStore" src="../../static/images/quanbu.png" mode="widthFix"></image>
					</view>

				</view>
				<view class="uni-list commodityListBox">
					<view class="uni-list-cell insideListBox" v-for="(items,indexs) in item.orderItemVoList" :key="indexs" @tap="goCommodityInfo(items)">
						<view class="leftPic">
							<image :src="items.productPic" mode="widthFix"></image>
						</view>
						<view class="rightInfo">
							<view class="title">
								{{items.productName}}
							</view>
							<view class="desction">
								{{items.productAttr}}
							</view>
							<view class="priceBox">
								<view>
									￥<text class="price">{{items.payPrice}}</text> ×<text>{{items.productQuantity}}</text>
								</view>
								<view v-if="data.status == 3&& items.status== 100 || data.status == 6&& items.status== 100 " class="refundBtn"
								 @tap.stop="refund(items)">
									退款
								</view>
								<view v-if="data.status == 9 && items.status == 100" class="refundBtn" @tap.stop="goSelectService(items)">
									申请售后
								</view>
								<view v-if="items.status == 120" class="refundBtn" @tap.stop="gorevocation(items)">
									退款中
								</view>
								<view v-if="items.status == 117" class="refundBtn">
									退款成功
								</view>
								<view v-if="items.status == 118" class="refundBtn"  @tap.stop="refund(items)">
									再次申请
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="orderId">
					<text>订单编号</text>
					<view>
						<text>{{item.orderId}}</text> <text class="copyBtn" @tap="copyNum(item.orderId)">复制</text>
					</view>
				</view>
				<view class="contact" @tap="goChat(item)">
					<image src="../../static/images/contact.png" mode="scaleToFill"></image>
					联系卖家
				</view>
			</view>
		</view>
		<view class="totalBox">
			<view class="totalPrice">
				<text class="title">订单总价</text>
				<text class="num">￥{{data.payAmount}}</text>
			</view>
			<view>
				<text>商品总价</text>
				<text>￥{{data.totalAmount}}</text>
			</view>
			<view>
				<text>运费总价</text>
				<text>￥{{data.freightAmount}}</text>
			</view>
		</view>
		<view class="totalBox">
			<view class="totalPrice">
				<text class="title">订单信息</text>
				<text class="num"></text>
			</view>
			<!-- <view v-if="data.status != 0">
				<text>订单编号</text>
				<text>{{data.orderId}}</text>
			</view> -->
			<view v-if="data.status != 0">
				<text v-if="data.paytype == 1">支付宝交易号</text>
				<text v-if="data.paytype == 2">微信交易号</text>
				<text v-else>交易号</text>
				<text>{{data.ref3thId}}</text>
			</view>
			<view>
				<text>创建时间</text>
				<text>{{data.gmtCreate | getTime}}</text>
			</view>
			<view v-if="data.status != 0">
				<text>付款时间</text>
				<text>{{data.paymentTime | getTime}}</text>
			</view>
		</view>

		<!-- <view class="totalBox" style="padding-top: 0;">
			<view class="totalPrice">
				<text class="title">联系客服</text>
				<image src="../../static/images/arrows-right.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="titles">
			<image src="../../static/images/like_icon.png" mode="widthFix"></image>
			你可能还会喜欢
		</view>
		<view class="specials">

			<view class="uni-list-cell selectList" v-for="(item,index) in selectList" :key="index" @tap="goDetails(item)">
				<view class="imgbox">
					<image :src="item.pic.split(',')[0]" lazy-load="true" mode="scaleToFill"></image>
				</view>
				<view class="">
					<view class="desction">
						{{item.name}}
					</view>

					<view>
						<view class="priceBox">
							￥ <text class="price">{{item.price}} </text>
						</view>
						<view class="storeName">
							<text>{{item.storeName}}</text>
							<text>总销量{{item.sale}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="payBottom" v-if="data.status == 0">
			<view class="btns">
				<text class="cancel" @tap="cancelOrder">取消订单</text>
			</view>
			<view class="btns">
				<text class="pay" @tap="payMoney">付款</text>
			</view>
		</view>
		<view class="loadStatusText">
			{{loadStatusText}}
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				data: {},
				orderId: "",
				pageNum: 0,
				loadStatusText: "加载中...",
				selectList: [],
				timer: "",
				timeDown: ""
			}
		},
		onLoad(e) {
			this.orderId = e.orderId;
			this.getData()
			this.getLikeList()
		},
		onShow() {
			this.getData()
			this.getLikeList()
		},
		onReachBottom() {
			this.getLikeList()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			getData() {
				let data = {
					orderId: this.orderId
				}
				this.$http.post('/api/v1.0/order/detailTwo', data, res => {
					this.data = res.data.data;
					if (res.data.data.status == 0) {
						let num =res.data.data.orderVoList.list[0].awaitgTime
						this.getTime(num)
					}
					if (res.data.data.status == 6) {
						console.log(res.data.data)
						this.timeDown = Math.floor(res.data.data.orderVoList.list[0].awaitgTime / 60 / 60 / 24)
					}

				})
			},
			refund(item) {
				uni.navigateTo({
					url: "../refund/refund?data=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			getLikeList() {
				this.pageNum++
				let data = {
					"pageNum": this.pageNum,
					"pageSize": 10,
					"recommandStatus": 0,
				}
				var _this = this
				this.$http.post(this.$http.baseUrl + '/api/v1.0/app/product/ProductTopSell', data, res => {
					if (res.data.data.length == 0) {
						_this.loadStatusText = "已加载全部"
						return false;
					} else {
						_this.loadStatusText = "加载成功"
						if (_this.selectList.length == 0) {
							_this.selectList = res.data.data;
						} else {
							_this.selectList = _this.selectList.concat(res.data.data);
							_this.loadStatusText = "加载成功"
						}
					}
				})
			},
			goDetails(e) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + e.id
				})
			},
			getTime(time) {
				let _this = this;

				let min, sec, hour
				if (time > 60) { //如果秒数大于60，将秒数转换成整数
					//获取分钟，除以60取整数，得到整数分钟
					min = parseInt(time / 60)<10? "0" + (parseInt(time / 60).toString()) : parseInt(time / 60);
					//获取秒数，秒数取佘，得到整数秒数
					sec = parseInt(time % 60) < 10 ? "0" + (parseInt(time % 60).toString()) : parseInt(time % 60);
					//如果分钟大于60，将分钟转换成小时
					if (min > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hour = parseInt(min / 60) < 10 ? '0' + (parseInt(min / 60).toString()) : parseInt(min / 60);
						//获取小时后取佘的分，获取分钟除以60取佘的分
						min = parseInt(min % 60) < 10 ? "0" + (parseInt(min % 60).toString()) : parseInt(min % 60);
					}
				} else {
					hour = '00'
					min = '00'
					sec = time
				}

				if (hour == undefined) {
					hour = '00'
				}
				this.timeDown = hour + ':' + min + ':' + sec
				this.timer = setInterval(() => {
					time--
					if (time > 60) { //如果秒数大于60，将秒数转换成整数
						//获取分钟，除以60取整数，得到整数分钟
						min = parseInt(time / 60)<10? "0" + (parseInt(time / 60).toString()) : parseInt(time / 60);
						//获取秒数，秒数取佘，得到整数秒数
						sec = parseInt(time % 60) < 10 ? "0" + (parseInt(time % 60).toString()) : parseInt(time % 60);
						//如果分钟大于60，将分钟转换成小时
						if (min > 60) {
							//获取小时，获取分钟除以60，得到整数小时
							hour = parseInt(min / 60) < 10 ? '0' + (parseInt(min / 60).toString()) : parseInt(min / 60);
							//获取小时后取佘的分，获取分钟除以60取佘的分
							min = parseInt(min % 60) < 10 ? "0" + (parseInt(min % 60).toString()) : parseInt(min % 60);
						}
					} else {
						hour = '00'
						min = '00'
						sec = time
					}
					if (time == 0) {
						sec = '00'
						clearInterval(_this.timer)
					}
					if (hour == undefined) {
						min = '00'
					} 
						_this.timeDown = hour + ':' + min + ':' + sec
				}, 1000)

			},
			goSelectService(item) {
				uni.navigateTo({
					url: "../refund/selectService?data=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			goCommodityInfo(item) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + item.productId
				})
			},
			goShop(id) {
				uni.navigateTo({
					url: '/pages/shop/shop?shopId=' + id
				})
			},
			gorevocation(item) {
				uni.navigateTo({
					url: '../refund/revocation?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			payMoney(){
				// #ifdef MP-WEIXIN
					this.WXpayMoney()
				// #endif
				
				// #ifdef MP-TOUTIAO
					this.TTpayMoney()
				// #endif
				
				// #ifdef MP-ALIPAY
					this.ALiPay()
				// #endif
			},
			WXpayMoney() {
				
				let data = {
					orderId: this.data.ref3thId,
					payType: "wxpay",
					businessType: 0,
				}
				this.$http.post('/api/v1.0/payParam', data, res => {
					console.log(res)
					if (res.data.status == '000000') {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp.toString(),
							nonceStr: res.data.data.nonceStr,
							package: "prepay_id=" + res.data.data.packAge,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function(res) {
								// console.log('success:' + JSON.stringify(res));
								uni.navigateTo({
									url: '../result/result?type=pay'
								})
							},
							fail: function(err) {
								// console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}

				})
			},
			TTpayMoney(){
				let data = {
					orderId :this.data.ref3thId,
					payType:"alipay",
					businessType: 0,
				}
				this.$http.post('api/v1.0/touTiaoPayParam',data,res=>{
					let orderInfo = {
						    app_id: res.data.data.appId,
						    sign_type: "MD5",
						    out_order_no: res.data.data.outOrderNo,
						    merchant_id: res.data.data.merchantId,
						    timestamp: res.data.data.timestamp,
						    product_code: "pay",
						    payment_type: "direct",
						    total_amount: res.data.data.totalAmount,
						    trade_type: "H5",
						    uid: res.data.data.uid,
						    version: "2.0",
						    currency: "CNY",
						    subject: res.data.data.subject,
						    body: "",
						    trade_time: res.data.data.tradeTime,
						    valid_time: res.data.data.validTime,
						    notify_url: res.data.data.notifyUrl,
						    alipay_url:res.data.data.alipayUrl,
						    sign: res.data.data.sign,
						    risk_info: res.data.data.riskInfo
						}
					if(res.data.status == '000000'){
						uni.requestPayment({
							provider: 'toutiao',
							orderInfo:orderInfo,
							service:4,
							success: function (res) {
								let code = res.code
								if(code == 0){
									uni.redirectTo({
										url:'../result/result?type=pay'
									})
								}else{
									// uni.redirectTo({
									// 	url:'myorder'
									// })
								}
								
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
								// uni.redirectTo({
								// 	url:'myorder'
								// })
							}
						});
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
					
				})
			},
			ALiPay(){
				let data = {
					orderId :this.data.ref3thId,
					payType:"alipay",
					businessType: 0,
				}
				this.$http.post('api/v1.0/pay',data,res=>{
					if(res.data.status == '000000'){
						uni.requestPayment({
							provider: 'alipay',
							orderInfo:res.data.data,
							success: function (res) {
								
								if(res.resultCode == '9000'){
									uni.redirectTo({
										url:'../result/result?type=pay'
									})
								}else{
									uni.redirectTo({
										url:'myorder?type=1'
									})
								}
								
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
								uni.redirectTo({
									url:'myorder'
								})
							}
						});
					}else{
						uni.showToast({
							title:res.data.message,
							icon:"none"
						})
					}
					
				})
			},
			cancelOrder() {
				var _this = this;
				uni.showModal({
					content: '确定取消订单？',
					confirmColor: "#F63810",
					success: function(res) {
						if (res.confirm) {
							let data = {
								orderId: _this.orderId
							}
							_this.$http.post('/api/v1.0/order/cancelOrder', data, res => {
								if (res.data.status == '000000') {
									uni.showToast({
										title: "取消成功！",
										icon: "none"
									})
									uni.navigateBack()
								} else {
									uni.showToast({
										title: "取消失败，请稍后再试！",
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			copyNum(id){
				uni.setClipboardData({
				    data: id,
				    success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
				    }
				});
			},
			goChat(item){
				// #ifdef MP-TOUTIAO
					uni.showToast({
						title:'暂不支持此功能~',
						icon:'none'
					})
					return false
				// #endif
				uni.navigateTo({
					url:'../chat/chat?name='+ item.storeName + '&storeId=' + item.storeId
				})
			}

		},
		filters: {
			getTime(val) {
				var time = new Date(val)
				let year = time.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
				let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				let hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
				let min = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
				let sec = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
				return year + '-' + month + '-' + day + ' ' + hours + ":" + min + ":" + sec
			}
		}
	}
</script>

<style lang="scss">
	.orderInfo {
		background-color: #f2f2f2;
		min-height: 100vh;
		.topStatus {
			background: linear-gradient(0deg, rgba(232, 39, 27, 1), rgba(252, 63, 12, 1));
			height: 280upx;
			display: flex;
			align-items: center;
			padding-left: 67upx;
			font-size: 32upx;
			color: #fff;
		}
		.addressInfo {
			background-color: #fff;
			height: 143upx;
			padding: 30upx 28upx;
			box-sizing: border-box;
			color: #333;
			font-size: 30upx;

			.phone {
				font-size: 26upx;
				color: #555;
			}

			.address {
				font-size: 28upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.content {
			margin-top: 30upx;
			.outLstbox {
				background-color: #fff;
				border-radius: 20upx;
				// padding: 30upx;
				margin-top: 20upx;
				padding-bottom: 10upx;
				.storeNameBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1upx solid #f2f2f2;
					padding: 15upx 30upx;
					.storeName {
						font-size: 28upx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;

						.storepic {
							width: 36upx;
							height: 36upx;
							margin-right: 10upx;
						}

						.goStore {
							width: 22upx;
							height: 22upx;
							margin-left: 10upx;
						}
					}

					.status {
						color: #F63810;
						font-size: 24upx;
					}
				}
				.commodityListBox {
					margin-bottom: 30upx;
					padding: 0 30upx;
					box-sizing: border-box;

					.insideListBox {
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;

						.leftPic {
							width: 180upx;
							height: 180upx;
							border-radius: 10upx;
							overflow: hidden;

							image {
								width: 180upx;
								height: 180upx;
							}
						}

						.rightInfo {
							width: 400upx;

							.title {
								color: #333;
								font-size: 28upx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								padding: 10upx 0;
							}

							.desction {
								font-size: 22upx;
								color: #808080;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.priceBox {
								font-size: 24upx;
								color: #333;
								display: flex;
								justify-content: space-between;

								.price {
									font-size: 32upx;
									margin-right: 20upx;
								}

								.refundBtn {
									width: 144upx;
									height: 52upx;
									border: 1upx solid #b3b3b3;
									color: #808080;
									border-radius: 26upx;
									font-size: 28upx;
									text-align: center;
									line-height: 50upx;
								}
							}
						}
					}

				}
				.orderId{
					display: flex;
					height: 84upx;
					justify-content: space-between;
					align-items: center;
					font-size: 24upx;
					color: #808080;
					padding: 0 28upx;
					border-top: 1upx solid #F2F2F2;
					border-bottom: 1upx solid #F2F2F2;
					box-sizing: border-box;
					.copyBtn{
						display: inline-block;
						font-size: 22upx; 
						color: #676767;
						margin-left: 20upx;
						padding: 5upx 15upx;
						border: 1upx solid #808080;
						border-radius: 5upx;
					}
				}
				.contact{
					color: #666666;
					font-size: 28upx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 20upx 0;
					image{
						width: 48upx;
						height: 48upx;
						margin-right: 20upx;
					}
				}
			}

		}

		.totalBox {
			margin-top: 20upx;
			background-color: #fff;
			padding-top: 15upx;

			view {
				font-size: 24upx;
				color: #808080;
				height: 63upx;
				border-bottom: 1upx solid #F2F2F2;
				padding: 0 28upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.totalPrice {

				.title {
					font-size: 28upx;
					color: #333;
				}

				.num {
					font-size: 24upx;
					color: #f63810;
					font-weight: bold;
				}

				image {
					width: 22upx;
					height: 22upx;
				}

			}
		}

		.titles {
			font-size: 28upx;
			color: #4d4d4d;
			text-align: center;
			margin-top: 50upx;
			margin-bottom: 30upx;

			image {
				width: 28upx;
				height: 28upx;
				margin-right: 10upx;
			}
		}

		.specials {
			width: 694upx;
			margin: 0 auto;

			.selectList {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				box-sizing: border-box;
				margin-bottom: 20upx;
				padding: 20upx;
				border-radius: 20upx;

				// padding-right: 0;
				.imgbox {
					margin-right: 25upx;

					image {
						width: 241upx;
						height: 241upx;
					}
				}

				.desction {
					font-size: 30upx;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.priceBox {
					font-size: 24upx;
					color: #F63810;
					font-weight: bold;
					margin-top: 40upx;

					.price {
						font-size: 32upx;
					}
				}

				.storeName {
					color: #4d4d4d;
					font-size: 22upx;
					margin-top: 10upx;
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.loadStatusText {
			font-size: 24upx;
			text-align: center;
			color: #999999;
			height: 100upx;
			line-height: 100upx;
		}

		.payBottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: flex-end;
			background-color: #fff;

			.btns {
				text-align: right;
				margin-top: 30upx;
				box-sizing: border-box;
				padding-right: 30upx;
				display: flex;
				justify-content: flex-end;

				text {
					display: inline-block;
					font-size: 24upx;
					// padding: 10upx 22upx;
					width: 138upx;
					height: 52upx;
					text-align: center;
					line-height: 52upx;
					border-radius: 26upx;
					margin-left: 20upx;

					&.cancel {
						background-color: #fff;
						color: #999;
						border: 1upx solid #999;
					}

					&.pay {
						background-color: #FF484A;
						color: #fff;
						border: 1upx solid #FF484A;
					}
				}
			}
		}
	}
</style>
